<script setup>
import {onBeforeMount, ref} from "vue";
import {getUserInfo, updateUserInfo} from "@/api/request.js";
import {useUserStore} from "@/store/user.js";
import axios from "axios";

const store = useUserStore()
const userInfo = ref({
  username: '',
  password: '',
  phone: '',
  avatar: '',
  intro: ''
});
const avatarSrc = ref('')

onBeforeMount(() => {
  getUserInfo({
    id: store.userId
  }).then(res => {
    console.log(res.data.data)
    userInfo.value = res.data.data
    avatarSrc.value = axios.getUri() + '/' + userInfo.value.avatar
  })
})

const onSubmit = () => {
  updateUserInfo({
    userInfo: userInfo.value
  }).then(res => {
    console.log('success')
  }).catch(err => {
    console.log(err)
  })
}

const afterRead = (file) => {
  avatarSrc.value = URL.createObjectURL(file.file);
  const formData = new FormData();
  formData.append('file', file.file); // fileInput是<input type="file">元素
  axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(response => {
    const fileName = response.data; // 这里获取到上传的文件名
    console.log('File uploaded successfully with name:', fileName);
    // 可以进一步处理文件名，比如显示在前端界面上，或者保存以供后续使用
    userInfo.value.avatar = response.data.data
    console.log(userInfo)
    store.avatar = response.data.data
  }).catch(error => {
    console.log(error)
  });
}

const onClickLeft = () => {
  history.back()
}
</script>

<template>
  <van-nav-bar left-arrow @click-left="onClickLeft"/>

  <div class="modify-box">
    <div class="user-info-edit">
      <van-form @submit="onSubmit">
        <van-nav-bar>
          <template #title>
            <div class="title">信息修改</div>
          </template>
        </van-nav-bar>

        <van-uploader :after-read="afterRead" class="user-avatar">
          <div class="user-avatar">
            <van-image :src='avatarSrc' height="6rem" round width="6rem"/>
          </div>
          <a><small>更换头像</small></a>
        </van-uploader>

        <van-field v-model="userInfo.username" label="用户名" placeholder="请输入用户名"/>
        <van-field v-model="userInfo.password" label="密码" placeholder="请输入密码" type="password"/>
        <van-field v-model="userInfo.phone" clearable label="手机号码" placeholder="请输入手机号码"/>

        <van-field v-model="userInfo.intro" label="介绍" label-align="top"/>

        <van-button block native-type="submit" style="margin-top: 1rem" type="primary">保存</van-button>
      </van-form>
    </div>
  </div>
</template>

<style lang="less" scoped>
.modify-box {
  width: 100%;
  height: 80vh;
  display: flex;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.9;

  .user-info-edit {
    margin: auto;
    padding: 10px 10px 20px 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    opacity: 0.9;

    .title {
      font-size: 20px;
      font-weight: 600;
    }

    .user-avatar {
      width: 100%;
      margin: 1rem 0;
      display: flex;
      justify-content: center;
      text-align: center;
    }
  }
}
</style>